import React, { useState } from 'react'
import { Cell, NavBar, Popup } from 'react-vant'
import { useTranslation } from 'react-i18next'
const App = () => {
  const [visible, setVisible] = useState(false);
  const { t, i18n } = useTranslation();
  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
    setVisible(false)
  }
  return (
    <div>
      <NavBar
        title={t('setTitle')}
      />
      <Cell title={t('theme')} isLink />
      <Cell title={t('lang.langTitle')} isLink value={t('lang.switch')} onClick={() => setVisible(true)} />
      <Cell title={t('fontSize')} />
      <Cell title={t('assistFunction')} />

      {/* 弹框 */}
      <Popup visible={visible} onClose={() => setVisible(false)}>
        <div style={{ width: '100vw', height: '100vh' }}>
          <NavBar
            title="选择语言"
            onClickLeft={() => setVisible(false)}
          />
          <Cell title='中文' onClick={() => changeLanguage('zh')}/>
          <Cell title='English' onClick={() => changeLanguage('en')}/>
          <Cell title='日本ご語' onClick={() => changeLanguage('jp')}/>
        </div>
      </Popup>
    </div>
  )
}

export default App